<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
	<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
	<META http-equiv="content-type" content="text/html; charset=utf-8">
	<TITLE>GCMSJob Metabolomics</TITLE>
	<style type="text/css" title="currentStyle">
                        @import "lib/css/demo_page.css";
                        @import "lib/css/demo_table.css";
        </style>
	<LINK rel="stylesheet" type="text/css" href="lib/css/jquery.ui.all.css">
	<LINK rel="stylesheet" type="text/css" href="lib/css/layout-default-latest.css">
        <LINK rel="stylesheet" type="text/css" href="css/style.css">
	<STYLE type="text/css">
	html, body {
		width:		99%;
		height:		99%;
		padding:	0;
		margin:		0;
		/*overflow:	hidden !important;*/
	}
	.cheight {
		height:30px;
                border: 1px solid blue;
	}
	span.mheadlinks 
	{
   	margin: 5 auto;
	float: right;
	font-size: 11px;
	color: white;
	}
	#optional-container {
		width:			99%;
		height:			99%;
		margin-top:		1%;
		margin-right:	0%;
		margin-left:   0%;
		margin-bottom: 1%
		overflow: scroll;
	}
	.ui-layout-pane-north,
	.ui-layout-pane-south{
    		overflow: hidden !important;
	}
	td.details_exp {
        background-color: #E8E8E8;
        border: 1px solid red;
	}
#title2 {
    font-size: 18px;
    color: blue !important;
  }

  p {
    color: black;
  }
  .title1 {
    font-size: 18px;
    color: blue !important;
  }
  span.message {
    font-size: 13px;
    color: darkblue !important; 
  }
	@media all {
		.page-break	{ display: block; }
	}
	@media print {
		.page-break	{ display: block; page-break-before: always; }
	}

	</STYLE>
	<SCRIPT type="text/javascript" src="lib/js/jquery.js"></SCRIPT>
	<SCRIPT type="text/javascript" src="lib/js/jquery.ui.js"></SCRIPT>	
	<SCRIPT type="text/javascript" src="lib/js/jquery.layout-latest.js"></SCRIPT>
	<link rel="stylesheet" type="text/css" href="lib/js/bootstrap.css" media="all">
        <script type="text/javascript" src="lib/js/bootstrap.js"></script>
	<script type="text/javascript" src="lib/js/jquery.dataTables.js"></script>
	<script type="text/javascript" src="lib/js/highcharts.js"></script>
        <script type="text/javascript" src="lib/js/exporting.js"></script>
	<script type="text/javascript" src="lib/jquery.ui.core.js"></script>
	<script type="text/javascript" src="lib/jquery.multiselect.js"></script>
	<link rel="stylesheet" href="lib/js/messi.min.css" />
	<link rel="stylesheet" href="lib/css/jquery.multiselect.css" />
	<link rel="stylesheet" href="lib/css/jquery.ui.css" />
	<script src="lib/js/messi.js"></script>
	<script type="text/javascript" src="js/library_compounds.js"></script>
	<script type="text/javascript" src="js/spectrum.js"></script>
	<script type="text/javascript" src="js/spectrum_annotation.js"></script>
	<script type="text/javascript" src="js/compound_precursor_product.js"></script>
	<script type="text/javascript" src="js/custom_plot.js"></script>
	<script type="text/javascript" src="js/experiment_groups.js"></script>
	<script type="text/javascript" src="js/util.js"></script>
	<script type="text/javascript" src="js/elements.js"></script>
	<script type="text/javascript" src="js/validation.js"></script>
	<script type="text/javascript" src="js/generatevialpos.js"></script>
	<script type="text/javascript" src="js/interactions.js"></script>
	<SCRIPT type="text/javascript">
	var myLayout;
	var oTable;
        var chromatogramTable;
        var spectrumTable;
	var compoundTable;
        var compoundSpectrumTable;
	var spectrumAnnotationTable;
	var compoundPrecursorTable;
	var reagent_dictionary;
        var ri_val;
	var precursorTypeAhead = null;
	var csearchTypeAhead = null;
	var datafileTypeAhead = null;

	$(document).ready(function(){
		init_gcms();
		var jqtabs = $("#tabs_div").tabs();
		var tempV = [''];
	        precursorTypeAhead = $('#compound_precursor').typeahead({source: tempV, items:20,
						onselect: function(sobj) {
                                                                var selected_precursor = sobj;
                                                                $("#derivation_groups").css("display","inline");
								$("#compound_precursor").val(selected_precursor);
                                                        }});
		csearchTypeAhead = $('#search_input').typeahead({source: tempV, items:10});
		datafileTypeAhead = $('#chromatogram_id').typeahead({source: tempV, items:10});
		$("#search_input").change(process_search);
		$("#compound_precursor").change(process_compound_precursor);
		$("#compound_synonym").change(update_synflag);
		$("#chromatogram_id").change(identify_df_key);
		$(".header-footer").hover(
			function(){ $(this).addClass('ui-state-hover'); },
			function(){ $(this).removeClass('ui-state-hover'); }
		);
		myLayout = $('#optional-container').layout({
			closable:					true	// pane can open & close
		,	resizable:					true	// when open, pane can be resized 
		,	slidable:					true	// when closed, pane can 'slide' open over other panes - closes on mouse-out
		,	livePaneResizing:			true
		,	north__slidable:			false	// OVERRIDE the pane-default of 'slidable=true'
		,	north__togglerLength_closed: '100%'	// toggle-button is full-width of resizer-bar
		,	north__spacing_closed:		20		// big resizer-bar when open (zero height)
		,	south__resizable:			false	// OVERRIDE the pane-default of 'resizable=true'
		,	south__spacing_open:		0		// no resizer-bar when open (zero height)
		,	south__spacing_closed:		20		// big resizer-bar when open (zero height)
		,	west__minSize:				100
		,	east__size:					300
		,	east__minSize:				200
		,	east__maxSize:				.5 // 50% of layout width
		,	center__minWidth:			100
		,	west__animatePaneSizing:	false
		,	west__fxSpeed_size:			"fast"	// 'fast' animation when resizing west-pane
		,	west__fxSpeed_open:			1000	// 1-second animation when opening west-pane
		,	west__fxSettings_open:		{ easing: "easeOutBounce" } // 'bounce' effect when opening
		,	west__fxName_close:			"none"	// NO animation when closing west-pane
		,	west__showOverflowOnHover:	true
		,	showDebugMessages:			true // log and/or display messages from debugging & testing code
		,west__initClosed: true,east__initClosed:true, south__initClosed: true
		});
		myLayout.sizePane("west", 500);
		myLayout.sizePane("east", 500);
		myLayout.sizePane("north", 60);
		$("#search_input").css("display","inline");
		Date.prototype.ddmmyyyy = function() {
		   var yyyy = this.getFullYear().toString();
   			var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
   			var dd  = this.getDate().toString();
   			return (dd[1]?dd:"0"+dd[0]) +"/" + (mm[1]?mm:"0"+mm[0]) +"/"+ yyyy; // padding
  		};
		Date.prototype.yyyymmdd = function() {
                   var yyyy = this.getFullYear().toString();
                        var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
                        var dd  = this.getDate().toString();
                        return yyyy + (mm[1]?mm:"0"+mm[0]) + (dd[1]?dd:"0"+dd[0]); // padding
                };
		d = new Date();
		$("#sample_type").multiselect({header: "Choose sample types", noneSelectedText:"Choose sample types", selectedList: 2, 
                    selectedText: function(numChecked, numTotal, checkedItems){
                            var stselected = $("#sample_type").val();
                            var sstv = "";
                            if (numChecked == 1){
                                sample_types = stselected;
                                return stselected;
                            }    
                            for (var i =0; i < numChecked; i++){
                                sstv = sstv + "," + checkedItems[i].value;
                            }
                            sample_types = sstv.substring(1, sstv.length);      
                            return sstv.substring(1, sstv.length);                          
                            }
                            });
                $("#sample_type").multiselect("uncheckAll");   

		$( "#job_date" ).datepicker({ dateFormat: "dd/mm/yy" });
		$( "#job_date" ).val(d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear());
		$( "#extraction_date" ).datepicker({ dateFormat: "dd/mm/yy" });
		$( "#tabs_div" ).bind( "tabsselect", function(){
			myLayout.close('east');
		        myLayout.close('west');
			if (arguments != null && arguments[1].index == 1 ){
			    new Messi('Report/result  page likely move to its own link, using sample_job_key', {title: 'ToDo', autoclose:2500});
			}else{
				$("#exp_grps_form").hide();
			}
			if (arguments != null && arguments[1].index == 2){
				load_ppc(function(){
					var max = 25;
					for (var i = 0; i < max; i++){
						if (orphan_products[i] != null){
                		                var orphan_cid = orphan_products[i]["id"];
						$('#' + orphan_cid + '_precid').typeahead(
							{source: precursorTypeAhead.data('typeahead').source, 
							updater: function(sobj) { 
                                        			var selected_precursor = sobj;
                                        			var selected_product = this.$element[0].id.split("_")[0];
								//$('#' + selected_product + '_precid').val(selected_precursor);
                                        			associate_ppc(selected_product, selected_precursor);
                                			}, 
							items:10});
						}else{
						    console.log("orphan_product is null for i " + i);    
						}
                        		}
				});
			}	
               }
		);
	$('a.redc').click(function(e) {
		e.preventDefault(); // don't follow the link
  		$(this).closest('tr').remove(); // credits goes to MrKurt for use of closest()
	});
       }); //end of .ready
	function dblclickExperiment(){
                        $('#exp_metabo_tbl tbody tr').unbind('dblclick').bind('dblclick', function () {
                        	var selectedData = oTable.fnGetData( this );
				updateExperiment(selectedData[7]);
                        return;
                        });
                }

                function dblclickChromatogram(){
                         $('#cdf_spectrum_tbl tbody tr').unbind('dblclick').bind('dblclick', function () {
                        var selectedData = chromatogramTable.fnGetData( this );
                        var cId = selectedData[0];
                        $('#chromatogramselected').html("Chromatogram:"+selectedData[2]);
                        document.getElementById("spectral_chartdiv").style.display = "block";
                        processSpectrum("cdf_rirt_tbl", cId);
                        return;
                        });
                }

		 function processChromatogramSpectrum(eid){
                        //document.getElementById("cdf_highchart").style.display = "none";
                        if (chromatogramTable != undefined)
                                chromatogramTable.fnClearTable();
                        //important to set type to GET for passing variables within URL
                        $.ajax({
                                type: "GET",
                                url:  "/cgi-bin/get_chromatogram.cgi?eid=" + eid,
                                success: function(json)
                                {
                                        $("#cdf_dialog").hide();
                                        var jo  = $.parseJSON(json);
                                        chromatogramTable = $('#cdf_spectrum_tbl').dataTable( {
                                        "bProcessing": true,
                                        "bDestroy": true,
                                        "aaData": jo.aaData,
                                        fnDrawCallback: function() {
                                               dblclickChromatogram();
                                        }
                                        } );
                                },
                                error:function(xhr,err)
                                {
                                        alert("Failed\nreadyState: "+xhr.readyState+"\nstatus: "+xhr.status + "\nresponseText: "+xhr.responseText);
                                }
                        });
                }

		function processSpectrum(specdiv, cid){
                        $("#spec_dialog").html("<img src='images/demo_wait.gif' />");
                        //document.getElementById("cdf_highchart").style.display = "none";
                        if (spectrumTable != undefined)
                                spectrumTable.fnClearTable();
                        $.ajax({
                                type: "GET",
                                url:  "/cgi-bin/get_spectrum.cgi?cid=" + cid,
                                success: function(json)
                                {
                                        $("#spec_dialog").hide();
                                        var jo  = $.parseJSON(json);
                                        spectrumTable = $('#'+specdiv).dataTable( {
                                        "bProcessing": true,
                                        "bDestroy": true,
                                        "aaData": jo.aaData,
                                        "iDisplayLength": 25,
                                        fnDrawCallback: function() {
                                                //alert("todo - spectral event");
                                        }
                                        } );
                                },
                                error:function(xhr,err)
                                {
                                        alert("Failed\nreadyState: "+xhr.readyState+"\nstatus: "+xhr.status + "\nresponseText: "+xhr.responseText);
                                }
                        });
                }

	$('.inside').hover(
	function () {
    $(this).animate({
        height: '200px',
        width: '200px'
    }, 200);
},

	function () {
    $(this).animate({
        height: '150px',
        width: '150px'
    }, 200);
	});

function refresh_libdb(){
	new Messi('Are you sure you want to refresh the LibDB?', {title: 'LibDB', buttons: [{id: 0, label: 'Yes', val: 'Y'}, {id: 1, label: 'No', val: 'N'}],
                callback: function(val) { 
			if (val == 'Y'){
                        $("#header_form_msg").html("<img src='images/demo_wait.gif' />");
			$.ajax({
                        type: "POST",
                        url:  "/cgi-bin/gencmnplibs.cgi",
                        success: function(json)
                        {
         			var jo  = $.parseJSON(json);
				var status = jo["status"];                
				$("#header_form_msg").html("");
				if (status == "200"){
                                	new Messi('Libray databases refreshed successful', {title: 'Done', autoclose: 2500});
                                }
				if (status == "500"){
                                        new Messi('Error on libray databases refresh, check with Daniel', {title: 'Error'});
                                }
			},
                        error:function(xhr,err)
                        {
				$("#header_form_msg").html("");
				new Messi('Error on libray databases refresh, check with Daniel', {title: 'Error'});

                        }
                        });
                }}});	
}

function gcmscontact(){
	new Messi('Christian Jaeger christian.jaeger@uni.lu +352 46 66 44 6650<br>Karsten Hiller karsten.hiller@uni.lu +352 46 66 44 6136', {title: 'Contact'});
}

function newsampletype(){
//maybe only allow this if user is christian, daniel, and jake - check name
  new Messi('Add sample type name:value along with authorization code<br>Sample type: <input type="text" id="psampletype"> <br>code: <input type="text" id="pauthcode"> ', {title: 'LibDB', buttons: [{id: 0, label: 'Yes', val: 'Y'}, {id: 1, label: 'No', val: 'N'}],
                callback: function(val) {
                        if (val == 'Y'){
                        $("#header_form_msg").html("<img src='images/demo_wait.gif' />");
                        /*$.ajax({
                        type: "POST",
                        url:  "/cgi-bin/gencmnplibs.cgi",
                        success: function(json)
                        {
                                var jo  = $.parseJSON(json);
                                var status = jo["status"];
                                $("#header_form_msg").html("");
                                if (status == "200"){
                                        new Messi('Libray databases refreshed successful', {title: 'Done', autoclose: 2500});
                                }
                        },
                        error:function(xhr,err)
                        {
                                $("#header_form_msg").html("");
                                new Messi('Error on libray databases refresh, check with Daniel', {title: 'Error'});

                        }
                        });*/
                }}});
}

	</SCRIPT>
</HEAD>
<BODY>

<DIV id="optional-container">
	<DIV class="ui-layout-north" id="northheader">
	<img src="images/unilulogo.jpg" width=40 height=40> &nbsp; &nbsp;</img>
	<img src="images/lcsblogo.jpg" width=40 height=40> &nbsp; &nbsp; <b></b></img>
	<b>GC-MS:Metabolomics Group</b> <span class="mheadlinks"><span id="header_form_msg"></span><a href="javascript:gcmscontact();">Help Contact</a>&nbsp; 
	  <a href="http://metabolomics.uni.lux/bugzilla/enter_bug.cgi?product=Metabobase" target="_blank">Report Bugs/New Features</a>
</span>
	</DIV>
	<DIV id="tabs_div" class="ui-layout-center">
		<UL style="-moz-border-radius-bottomleft: 0; -moz-border-radius-bottomright: 0;">
			<LI><A href="#gcms_container"><SPAN TITLE="Job">Submission</SPAN></A></LI>
		</UL>
		<DIV class="ui-layout-content ui-widget-content ui-corner-bottom" style="border-top: 0; padding-bottom: 1em;">
		  <DIV id="experiment_chromatography_tab">
			<div id="container">
                        <div id="dynamic">
	<div id="cdf_dialog"></div>
	<br><br>
	<div id="cdf_chartdiv" style="display: none"><h1>Chromatogram</h1><span id="experimentselected">Experiment Description ...</span>
        	<table cellpadding="0" cellspacing="0" border="0" class="display" id="cdf_spectrum_tbl">
                        <thead>
                        <tr>
                        <th width="5%">Id</th>
                        <th width="15%">Date</th>
                        <th width="20%">File</th>
                        <th width="10%">Operator</th>
                        <th width="15%">Method</th>
                        <th width="35%">Intensity</th>
                </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
                <tr>
                        <th width="5%">Id</th>
                        <th width="15%">Date</th>
                        <th width="20%">File</th>
                        <th width="10%">Operator</th>
                        <th width="15%">Method</th>
                        <th width="35%">Intensity</th>
                </tr>
                </tfoot>
                </table>
	</div>
<div id="spec_dialog"></div>
<div id="spectral_chartdiv" style="display: none"><h1>Spectrums</h1><span id="chromatogramselected">Experiment Description ...</span>
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="cdf_rirt_tbl">
                        <thead>
                        <tr>
                        <th width="10%">Id</th>
                        <th width="20%">RI</th>
                        <th width="20%">RT</th>
                        <th width="50%">Spectral Peaks</th>
                </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
                <tr>
                <th width="10%">Id</th>
                <th width="20%">RI</th>
                <th width="20%">RT</th>
                <th width="50%">Spectral Peaks</th></tr>
                </tfoot>
                </table>
        </div> 
</div>
</div>
	</DIV>
	<DIV id="gcms_container">	
	<font style="color:blue;size=18">GC-MS Project Information</font>
	<span><a href="#" ><font size="-2" color="blue">*Required</font></a>&nbsp;</span>	
	<span id="projectmsg"></span>
	<div id="project_sample_form" style="page-break-after:always;">
                        Name*: <input style="width:290px" size="100" id="personname"  placeholder="Firstname Lastname" data-provide="typeahead"> &nbsp;Email*: <input style="display:inline;width:290px;" size="150" id="email">
			
			<!--	
			Group*: <select style="width:375" id="groupname" style="display:inline">
                            <option value = "1">Metabolomics</option>
                        </select>
			<br><br>Email*: <input style="display:inline" size="150" id="email">
                        Phone: <input style="display:inline" size="150" id="phone">
			-->
			<br><br>
<!-- Project name*: <input id="projectname" size="400" style="display:block;width:700px;">-->
Project name*: 
			<select id="projectname" style="display:inline;width:560"></select>&nbsp;<a href="#" onclick="addExpProject();"><font color="blue" size="-1">&nbsp;new&nbsp;</font></a>
			<input style="display:none;width:250px" name="new_exp_project" id="new_exp_project" placeholder="enter new project name" onchange="addNewProject();">
			<label for="objectives"><a href="#" class="atooltip" data-tip="Objectives">Measurement objectives, keywords and comments*:</a></label>
                        <textarea style="display:inline;width:700px;" rows="3" cols="600" place_holder="Objectives" id="objectives" ></textarea>

			<br>GC-MS (32.50 &euro;/h)
			<div style="display:none">	<input type="checkbox" checked id="statanalysis" value="">&nbsp;Statistical analysis (100&euro;)
                        <input type="checkbox" checked id="quantanalysis" value="">&nbsp;Quantitative analysis (10&euro;/sample)
			</div>
			<br><br>Expected outcome: <select style="width:150" id="expoutcome" style="display:inline">
                                <option value = "1">Test</option>
                                <option value = "2" selected >Publication</option>
                                <option value = "3">Patent</option>
                        </select>			
			Metabolomics group involvement: <select style="width:150" id="grpinvolvement" style="display:inline">
                            <option value = "1"></option>
                                <option value = "2" selected >Coauthor</option>
                                <option value = "3">Acknowledgment</option>
                        </select><br><br>
	
		<p class="title1">Sample Sequencing Information</p>
			<a href="#" class="atooltip" data-tip="Example inputs are cells, plasma, tissue, medium, contact Christian/Jake about rules for adding new samples">Sample type:&nbsp;</a><select tyle="width:600;display:inline;" multiple="multiple" name="sample_type" id="sample_type">
                                <option value = "A549">A549</option>
				<option value = "BV2">BV2</option>
				<option value = "CSF">CSF</option>
				<option value = "C3A (HepG2/C3A)">C3A (HepG2/C3A)</option>
				<option value = "DBS">Dried blood spots</option>    
				<option value = "HEK">HEK</option>
				<option value = "HEK293FT">HEK293FT</option>
				<option value = "HG2">HepG2</option>	
				<option value = "Hep-3B">Hep-3B</option>
				<option value = "HPM">HPM</option>
				<option value = "HPN">HPN</option>
				<option value = "HLE">HLE</option>
				<option value = "HLF">HLF</option>
				<option value = "HuH-7">HuH-7</option>
				<option value = "JHH-4>">JHH-4</option>
				<option value = "LUHMES">LUHMES</option>
				<option value = "MM6">MM6</option>
				<option value = "MB">Mouse brain</option>
				<option value = "PMacrophage">PBMC-derived Macrophages</option>
				<option value = "PH5CH8">PH5CH8</option>	
				<option value = "PLC/PRF/5 Alexander">PLC/PRF/5 Alexander</option>
				<option value = "RAW">RAW</option>
				<option value = "RAW 264.7">RAW 264.7</option>
				<option value = "RWPE 1">RWPE 1</option>
				<option value = "RWPE 2">RWPE 2</option>
				<option value = "SK-HEP-1">SK-HEP-1</option>
				<option value = "SNU-387">SNU-387</option>
				<option value = "SNU-423">SNU-423</option>
				<option value = "SNU-449">SNU-449</option>
				<option value = "SNU-475">SNU-475</option>
				<option value = "THLE-2">THLE-2</option>
				<option value = "THLE-3">THLE-3</option>
				<option value = "THP‑1">THP‑1</option>
                                <option value = "U937">U937</option>
                                <option value = "Yeast">Yeast</option>
                        </select>&nbsp;
			<!--	<a href="javascript:newsampletype()"><font color="blue" size="-1">new</font></a> -->
			<a href="#" class="atooltip" data-tip="Optional short sample identifier label for grouping and further classification of samples">Sample Identifier:&nbsp;</a><input type="text" style="display:inline;height:28px;width:170px;" id="expsamplelabel">

			<br><a href="#" class="atooltip" data-tip="Conditions need to be separated by comma, some conditions are: CTL, LPS1, LPS2..., Alkanes added automatically">Conditions:</a> <input id="conditions" size="500" style="display:block;width:690px;" placeholder="Conditions separated by comma" onchange="javascript:generate_condition_methods()">	
			<span id="condition_method_container"></span>
			<span id="medium_method_container"></span>
			<br><a href="#" class="atooltip" data-tip="Biological replicates indicate repetitive analyses of samples obtained from different individuals or pooled individuals from a population. Analytical implies same sample obtained from the same individual or pooled individual">Replicates: </a> <select style="width:150" id="replicatetype" style="display:inline">
                            <option value = "biological" selected>Biological</option>
                                <option value = "analytical">Analytical</option>
                        </select>&nbsp;Count: <input type="number" style="display:inline;height:28px;width:40px;" id="replicatecount" value="1">			
			<!-- <a href="#" class="atooltip" data-tip="Optional sample identifier to label and group samples">Sample Identifier:&nbsp;</a><input type="text" style="display:inline;height:28px;width:40px;" id="expsamplelabel"> -->

			<br><a href="#" class="atooltip" data-tip="Standard instrument requires blanks between every replicate consisting of samples to each conditions, you can additionally add more for custom sequencing">Additional controls</a> &nbsp;extra blank per <input type="number" style="display:inline;height:28px;width:50px;" id="blankbin" >&nbsp; samples &nbsp;pool per <input type="number" style="display:inline;height:28px;width:50px;" id="poolbin" > samples

<!--
<input type="checkbox" id="blankctl" value="">&
<input type="checkbox" checked id="poolctl" value="">
-->
			<!--
			<br>Sample key: <input id="samplekey" size="400" style="display:block;width:670px;" placeholder="System generate sample to vial positions...">
			 <br>Assigned rack: <span id="rackid"><a href="javascript:generatevialpos()"><font color="blue" size="-1">Generate Sample Vial Sequences</font></a><input id="rackkey" size="400" style="display:block;width:670px;" placeholder="System assign...">			
			<br><a href="javascript:generatevialpos()"><font color="blue" size="-1">Generate Sample Vial Sequences</font></a>
			<br><button id="generateSequenceButton" onClick="javascript:generatevialpos()">Generate Vial Sequence</button>
			-->	
			<br><span id="jobsummary">Job summary:</span>
			<br><br> Date: <input type="text" style="display:inline;height:28px;width:250px;" id="job_date" >
                        &nbsp;Signature (PI*):
		</div>
		<p class='title1' style="display:inline">Sample meta/extraction information</p>&nbsp;
		<a href="javascript:togglemethodform()"><font color="blue" size="-1">expand/hide</font></a>
	 	<div id="extractionmethodform"> 
			<br><label for="labnotebook"><a href="#" class="atooltip" data-tip="Lab notebook, pages and other relevant notes">Lab notebook and pages:</a></label>
                        <textarea rows="1" style="display:inline;width:700px;" cols="600" place_holder="" id="labnotebook" ></textarea>

			<br>Extraction date: <input type="text" style="display:inline;height:28px;width:150px;" id="extraction_date" >
			&nbsp;Polarity: <select style="width:100" id="rpolarity" style="display:inline">
                                <option value = ""></option>
				<option value = "Yes">Yes</option>
                                <option value = "No">No</option>
                        </select> &nbsp;Volume/vial: <input id="vialvol" style="display:inline;width:70px;" placeholder="">&nbsp;&micro;l (dried)
			<br>Internal standard(s): <input type="text" style="display:inline;height:28px;width:540px;" id="internalstandards" >
			<br>Medium: <select style="width:100" id="mediumtype" style="display:inline">
                           	<option value = ""></option>
				<option value = "Defined">Defined</option>
                                <option value = "Complex">Complex</option>
                        </select> &nbsp; 
			Name: <input type="text" style="display:inline;height:28px;width:465px;" id="mediumname" >
			<br>Carbon source(s): <input type="text" style="display:inline;height:28px;width:310px;" id="carbonsources" >&nbsp;Nitrogen source: <input type="text" style="display:inline;height:28px;width:130px;" id="nitrogensource" >  
			<label for="solventinfo"><a href="#" class="atooltip" data-tip="Solvents, pH and ionic strength of buffer(if relevant), solvent temperature and volume(s) per quantity of tissue, number of replicate extracts, sequential extraction and extraction time">Solvent(s) details*:</a></label>
                        <textarea rows="2" style="display:inline;width:700px;" cols="600" place_holder="Solvents, pH and ionic strength of buffer(if relevant), solvent temperature and volume(s) per quantity of tissue" id="solventinfo" ></textarea>
			<br><label for="extractenrichment"><a href="#" class="atooltip" data-tip="Hint...">Enrichment:</a></label>
                        <textarea rows="1" style="display:inline;width:700px;" cols="600" place_holder="" id="extractenrichment" ></textarea>
			<br><label for="extractcleanup"><a href="#" class="atooltip" data-tip="SPE, solid phase extraction column volume/mass, elutant, sorbent, manufacturer; Desalting, molecular weight cut-off, ion exchange, etc.">Cleanup and/or additional manipulation:</a></label>
                        <textarea rows="1" style="display:inline;width:700px;" cols="600" place_holder="Additional manipulation?" id="extractcleanup" ></textarea>
			<br><label for="extractconcentration"><a href="#" class="atooltip" data-tip="Ultrafiltration, removal of paramagnetic ions, addition of metal chelators such as EDTA, citrate, reducing agents such as DTT, dilution, etc">Concentration:</a></label>
                        <textarea rows="1" style="display:inline;width:700px;" cols="600" place_holder="Concentration notes" id="extractconcentration" ></textarea>
                        <br><label for="storage"><a href="#" class="atooltip" data-tip="Vacuum concentrator, dried under nitrogen, temperature and duration, etc ...">Storage and/or relocation:</a></label>
                        <textarea rows="1" style="display:inline;width:700px;" cols="600" place_holder="Storage and relocation notes" id="storage" ></textarea>

	      </div>
		<input type="hidden" id="total_samples"><input type="hidden" id="ssequence">
	      <br><button id="generateSequenceButton" onClick="javascript:generatevialpos()">Generate Vial Sequence</button><span id='submitspan'></span>
		<span id='submitmsg'></span>
		
                <div id="measuredresultsform" style="display:none">
			<p class='title1' style="display:inline">Measurement and Data Analysis</p>&nbsp; 

                        <br><label for="gcmsfilesfolder"><a href="#" class="atooltip" data-tip="GCMS files folder">GC-MS files folder:</a></label>
                        <textarea rows="1" style="display:inline;width:700px;" cols="600" place_holder="" id="gcmsfilesfolder" ></textarea>
			<br><label for="analysisfolder"><a href="#" class="atooltip" data-tip="Lab notebook, pages and other relevant notes">Data analysis folder:</a></label>
                        <textarea rows="1" style="display:inline;width:700px;" cols="600" place_holder="" id="analysisfolder" ></textarea>

                <br><button id="saveMeasurementsButton" onClick="javascript:recordmeasurements()">Save</button>
                <span id='measuredmsg'></span>
		</div>	

</DIV> <!-- gcms_container -->
		</DIV>
	</DIV>
	<DIV class="ui-layout-west"> 
		<div id="chart_div"></div>
		<div id="chart_table_div" class="a"></div>
		<div id="precursor_details_view"></div>
	</DIV>
	<DIV class="ui-layout-east">
		<span id="compound_form_msg"></span>
		<div id="spectrum_form">
			<label for="chromatogram_id">Data file:</label>
                        <input size="75" name="chromatogram_id" id="chromatogram_id"  placeholder="Type data file..." data-provide="typeahead">

			<label for="sp_ri">RI:</label>
                	<input style="display:block" size="50" name="sp_ri" id="sp_ri" type="text">
			<!-- <span><fieldset> -->
			    <!-- <legend>RT:</legend> -->
			<label for="sp_rtmin">RT min:</label>
    			<input style="display:block" name="sp_rtmin" size="50" id="sp_rtmin" type="text">
    			<label for="sp_rtsec">RT sec:</label><input style="display:block" size="50" name="sp_rtsec" id="sp_rtsec" type="text">
    			<label for="sp_rtmils">RT mils:</label><input style="display:block" size="50" name="sp_rtmils" id="sp_rtmils" type="text">
  			<!-- </fieldset> -->
			<!-- </span>-->
			<label for="sp_resolution">Resolution:</label>
			<input style="display:block" size="50" value="1" name="sp_resolution" id="sp_resolution" type="text">
			<label>Origin:</label>
		        <select id = "spectrum_origin_id" name="spectrum_origin_id" style="display:block">
			</select>
			<!-- spectrum user comments -->
			<label for="spectral_comments"><a href="#" class="atooltip" data-tip="User comments">Comments</a></label>
                        <textarea style="display:block" rows="3" cols="50" place_holder="User comments" name="spectral_comments" id="spectral_comments" ></textarea>
			<label for="spectral_peaks"><a href="#" class="atooltip" data-tip="Spectral peaks include mz and intensity, and need to be one pair per row">Spectral peaks</a></label>
                	<textarea style="display:block" rows="10" cols="50" place_holder="mz intensity pairs" name="spectral_peaks" id="spectral_peaks" ></textarea>
			<button id="newSpectrumButton" onClick="associate_compound_spectrum(null)">Add</button>                
			<button id="hideSpectrumButton" onClick="hide_spectrum(null)">Cancel</button>			
		</div>
		<div id="spectrum_annotation_form" style="display: none">
			<span class="table_header_style"><a href="#" class="atooltip" data-tip="Double click on row for mz/intensity  plot and table">Mass spectra</a></span>
			<table cellpadding="0" cellspacing="0" border="0" class="display" id="compound_spectral_tbl">
                        	<thead>
                        	<tr>
                        		<th width="10%">Id</th>
                        		<th width="15%">RI</th>
                        		<th width="15%">Origin</th>
                        		<th width="15%">Date</th>
					<th width="30%">Comments</th>
					<th width="10%"></th>
                		</tr>
        			</thead>
        			<tbody>
        			</tbody>
			</table>
			<br>
			<span class="table_header_style">Spectrum annotation</span>
			<table cellpadding="0" cellspacing="0" border="0" class="display" id="spectrum_annotation_tbl">
                                <thead>
                                <tr>
                                        <th width="10%">m/z</th>
                                        <th width="15%">Formula</th>
                                        <th width="10%">MMI</th>
					<th width="20%">Precursor Atoms Retained</th>
					<th width="10%">Confirmed</th>
					<th width="15%">Comment</th>
					<th width="10%"></th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                        </table>
			<label for="spa_formula"><a href="#" class="atooltip" data-tip="Spectral Formula">Formula</a><span id="spa_formula_span"></span></label>
                        <input style="display:block" size="50" id="spa_formula" onChange="updateSpectrumFormula()" onFocus="load_structure()">
			<label for="spa_peak_mz"><a href="#" class="atooltip" data-tip="Spectral peak">m/z</a></label>
                        <input style="display:block" size="50" id="spa_peak_mz" onChange="updateSpectrumMZ()">
			<label for="spa_isotope_max_mass"><a href="#" class="atooltip" data-tip="Max isotope max for labeling">Max mass isotopomer</a></label>
                        <input style="display:block" size="50" id="spa_isotope_max_mass">
			<label for="spa_confirm"><a href="#" class="atooltip" data-tip="Confirmed by labeling for high confidence">Confirmed by labeling</a></label>
                        <input name="spa_confirm" value="false" type="checkbox" id="spa_confirm">
			<div id="spa_pstructure"></div>
			<div id="spa_structure_container" style="display:none;"></div>
			<label for="spa_precursor_atoms_retained"><a href="#" class="atooltip" data-tip="precursor_atoms_retained">Precursor atoms retained</a></label>
                        <input style="display:block" size="75" id="spa_precursor_atoms_retained" value="">
			<label for="spa_inchi"><a href="#" class="atooltip" data-tip="Inchi text">Inchi</a></label>
                        <textarea style="display:block" rows="2" cols="50" place_holder="inchi text" id="spa_inchi" ></textarea>
			<label for="spa_comment"><a href="#" class="atooltip" data-tip="Readable molecule fragment comments">Comment</a></label>
                        <textarea style="display:block" rows="2" cols="50" place_holder="e.h. [M-TMS]+ or [M-CO2-CH3]+" id="spa_comment" ></textarea>
                        <button id="newSpaButton" onClick="associate_spectrum_annotation(null)">Add</button>
                        <button id="hideSpaButton" onClick="hide_spectrum_annotation(null)">Cancel</button>
                </div>
		<div id="compound_form">
		<input type="hidden" name="compound_id" id="compound_id" >
		<input type="hidden" id="precursor_id" value="">
		<input type="hidden" id="synonym_changed" value="">
		<label for="compound_name"><a href="#" class="atooltip" data-tip="Compound name is required">Name</a></label>
                <input style="display:block" size="50" name="compound_name" id="compound_name" >
		<span id="structure_span">
		<!--<p><a href="http://metabolomics.uni.lux/~dweindl/mddb/struc_svg.php?cid=25643" target="_blank">
		<img border="0" src="http://metabolomics.uni.lux/~dweindl/mddb/struc_svg.php?cid=25643" width="50%" height="20"></a>
		</p>-->
		</span>
	
		<label for="compound_synonym"><a href="#" class="atooltip" data-tip="One synonym entry per row">Synonyms</a></label>
                <textarea style="display:block" rows="1" cols="30" name="compound_synonym" id="compound_synonym" ></textarea>
		<span class="table_header_style">Precursors</span>
                        <table cellpadding="0" cellspacing="0" border="0" class="display" id="compound_precursor_tbl">
                                <thead>
                                <tr>
                                        <th width="25%">Precursor</th>
                                        <th width="30%">Derivatization reagent</th>
                                        <th width="10%"></th>
					<th width="10%"></th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                        </table>
                <br>
		<label for="compound_precursor"><a href="#" class="atooltip" data-tip="Optional, but precursor compound must be valid, use lookup service">Precursor name</a>&nbsp;<span id="precursor_details"></span></label>
                <input style="display:block" size="50" name="compound_precursor" id="compound_precursor" placeholder="Type compound..." data-provide="typeahead">
		<label for="derivation_reagent"><a href="#" class="atooltip" data-tip="Required for Precursor Compound">Derivatization reagent</a></label>
                <select id = "derivation_reagent" name="derivation_agent" style="display:inline"><option value = "na"></option></select>&nbsp;<span id="precursor_action"style="display:inline"><button type="button" onclick="javascript:save_precursor()">Associate</button></span>		
		<input type="hidden" id="precursor_mode" value="insert" >
		<br>
		<div id="derivation_groups" style="display:none"></div>
		
                <label for="sum_formula"><a href="#" class="atooltip" data-tip="Formula is required for calculation of mass and weight">Formula</a></label>
                <input style="display:block;height:30px;width:400px;" size="100" name="sum_formula" id="sum_formula" onChange="updateFormula()">
                <label for="nominal_mass">Nominal mass:</label>
                <input style="display:block" size="50" name="nominal_mass" id="nominal_mass" >
		<label for="molecular_weight">Molecular weight:</label>
                <input style="display:block" size="50" name="molecular_weight" id="molecular_weight" >
                <label for="monoisotopic_mass">Monoisotopic mass:</label>                
		<input style="display:block" size="50" name="monoisotopic_mass" id="monoisotopic_mass" >
		<label for="reference_spectrum_id"><a href="#" class="atooltip" data-tip="Spectrum id must exist or use the create new">Spectrum id:</a>&nbsp;<a href=javascript:show_spectrum_form(null)><font size='-2'>New</font></a></label>
                <input style="display:block" size="50" name="reference_spectrum_id" id="reference_spectrum_id" >
		<label for="ref_cas_id"><a href="http://www.cas.org" target="_blank">CAS</a> id:</label>
                <input style="display:block" size="50" name="ref_cas_id" id="ref_cas_id" >
		<label for="ref_pubchem_id"><span id="pubchem_deeplink"><a href="http://pubchem.ncbi.nlm.nih.gov/" target="_blank">Pubchem</a></span> id:</label>
                <input style="display:block" size="50" name="ref_pubchem_id" id="ref_pubchem_id" >
		<label for="ref_hmdb_id"><span id="hmdb_deeplink"><a href="http://www.hmdb.ca" target="_blank">HMDB</a></span> id:</label>
                <input style="display:block" size="50" name="ref_hmdb_id" id="ref_hmdb_id" >
		<label for="ref_nist_id"><a href="http://webbook.nist.gov/chemistry" target="_blank">NIST</a> id:</label>
                <input style="display:block" size="50" name="ref_nist_id" id="ref_nist_id" >
		<label for="ref_chemspider_id"><span id="chemspider_deeplink">Chemspider id</span></label>
                <input style="display:block" size="50" name="ref_chemspider_id" id="ref_chemspider_id" >
		<label for="ref_cas_id"><span id="kegg_deeplink"><a href="http://www.genome.jp/kegg/ligand.html" target="_blank">KEGG id</a></span></label>
                <input style="display:block" size="50" name="ref_kegg_id" id="ref_kegg_id" >
		<label for="inchi">Inchi:</label>
                <input style="display:block" size="50" name="inchi" id="inchi" >
		<label for="inchi_key">Inchi key:</label>
		<textarea style="display:block" rows="2" cols="50" name="inchi_key" id="inchi_key" ></textarea>
		<label for="lcchecked">Checked:</label>
                <input type="checkbox" style="display:block" name="lcchecked" id="lcchecked" >
                <label for="comments">Comments:</label>
                <textarea style="display:block" rows="2" cols="50" name="lccomment" id="lccomment" ></textarea>
                <button id="newCompoundButton" onClick="post_library_compound(null)">Submit</button>
		<button id="hideCompoundButton" onClick="hide_compound_details(null)">Cancel</button>
		<button id="newCompoundButton" onClick="delete_library_compound(null)">Delete</button>
        	</div>
		<div id="exp_grps_form"><font color="cornflowerblue"><span id="experiment_form_message">Add New Experiment</span></font>&nbsp;
			<br>
			<div id="exp_add_form">
                	<span style="width:250px">
			<label for="exp_title">Title:</label>
			<input style="display:inline;width:420px;" name="exp_title" id="exp_title" >
			</span><span style="width:250px"><br>
			<label for="exp_title" >Experimenter:</label>
			<select id = "exp_people" name="exp_people" style="display:inline;width:420px;"></select>
			</span><span style="width:250px"><br>
			<label for="exp_date" >Date (dd/mm/yyyy):</label>
			<input type="text" style="display:inline;height:28px;width:420px;" name="exp_date" id="exp_date" >
			</span><span style="width:250px"><br>
			<label for="exp_title">Project:</label>
			<select id = "exp_project" name="exp_project" style="display:inline;width:250px;"></select><a href="#" onclick="addExpProject();"><font color="blue">&nbsp;Add New&nbsp;</font></a> 
                        <input style="display:none;width:150px" name="new_exp_project" id="new_exp_project" onchange="saveExpProject();">
			</span>
			<label for="exp_short_description">Keywords:</label>
			<textarea style="display:inline;width:420px;" rows="1" cols="500"  name="exp_keywords" id="exp_keywords"></textarea>
			<label for="exp_description">Description:</label>
			<textarea style="display:inline;width:420px;" rows="2" cols="500"  name="exp_description" id="exp_description" ></textarea>	
			<br><button id="newExperimentButton" onClick="postNewExperiment()">Save Experiment</button>
			<span id="experiment_archive"></span>	
			</div>
			<br><span id="experiment_group_message"><font color="cornflowerblue">Defining Groups&nbsp;</font><span id="isocheck"><input id="tracer_groups" value="tracer" type="checkbox">&nbsp;Isotopic Tracer&nbsp;</span><span id="experiment_group_status"></span></span>
			<br><a href="#" onclick="addMoreGroups(3);"><font color="blue">&nbsp;+more</font></a></font><span id="annotate_tracer"></span><br>
			<div id="define_groups_form">
			</div>
			<br>
			<div><button id="newGroupButton" disabled onClick="postExperimentGroups()">Save Groups</button></div>
			<div id="isotopic_tracer_form"></div>
			<br>
			<font color="cornflowerblue">Chromatogram:Group Associations</font>&nbsp;
			<div id="chromatogram_group_form"><br>
			<label style="display:inline" for="search_chromatograms">Search:</label>			
                        <input style="display:inline;width:200px;" id="search_chromatograms">
			<input type="checkbox" id="onlyunassigned" name="onlyunassigned" value="unassigned" checked> Only unassigned
			<div id="scdf_dialog"></div> 
			<button id="searchChromatogramButton" onClick="searchChromatograms()">Go</button><br><br>
			<div id="chr_search_results" class="a">
			</div>
			<br><br>
			<div id="chr_grp_association_form">
				<div id="chr_grp_association_div">
					<span id="chr_grp_function"></span>				
					<table id="chr_grp_association_table"></table>
					<div id="chr_grp_association_existing"></div>
			</div></div>
			<br><button id="chromGroupButton" disabled onClick="postChromGroups()">Associate Sample Groups</button>
			</div>
		</div>
        </DIV>
	<!--	<DIV class="ui-layout-south"> South </DIV>	-->


</DIV>
</DIV>
</BODY>
</HTML>
